<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	
	<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>管理员登录页面</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Free HTML5 Template by FreeHTML5.co" />
<meta name="keywords"
	content="free html5, free template, free bootstrap, html5, css3, mobile first, responsive" />




<!-- Facebook and Twitter integration -->
<meta property="og:title" content="" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta property="og:site_name" content="" />
<meta property="og:description" content="" />
<meta name="twitter:title" content="" />
<meta name="twitter:image" content="" />
<meta name="twitter:url" content="" />
<meta name="twitter:card" content="" />

<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="shortcut icon" href="favicon.ico">

<link
	href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300'
	rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="${pageContext.request.contextPath}/login/css-login/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/login/css-login/animate.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/login/css-login/style.css">


<!-- Modernizr JS -->
<script src="${pageContext.request.contextPath}/login/js-login/modernizr-2.6.2.min.js"></script>
<!-- FOR IE9 below -->
<!--[if lt IE 9]>
	<script src="js/respond.min.js"></script>
	<![endif]-->
<style type="text/css">
#webcam {
	border: 1px solid #666666;
	width: 320px;
	height: 240px;
}

#photos {
	border: 1px solid #666666;
	width: 320px;
	height: 240px;
}

.btn {
	width: 320px;
	height: auto;
	margin: 5px 0px;
}

.btn input[type=button] {
	width: 150px;
	height: 50px;
	line-height: 50px;
	margin: 3px;
}
</style>




</head>
<body class="style-3">

	<div class="container">
		<div class="row">
			<div class="col-md-12 text-center">
				<ul class="menu">
					<li><a href="${pageContext.request.contextPath}/adminapi/index-login">我是用户</a></li>
					<li><a href="${pageContext.request.contextPath}/index-login2">我是商家</a></li>
					<li class="${pageContext.request.contextPath}/index-login3"><a href="index-login3">我是管理员</a></li>
				</ul>
			</div>
		</div>
		<div class="row">
			<div class="col-md-4 col-md-push-8">
				<div id="webcam"></div>
					<div class="btn">
						 <input type="button" value="刷脸" id="saveBtn" class="btn btn-primary"  onclick="savePhoto();" />
					</div>

					<!-- <div class="form-group">
						<input type="submit" value="登录" class="btn btn-primary">
							<input type="button" value="刷脸" class="btn btn-primary">
					</div> -->
				
				<!-- END Sign In Form -->


			</div>
		</div>

	</div>
	

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/admin/js/jquery.webcam.min.js"></script>
<script type="text/javascript">
	$(function() {
		var w = 320, h = 240;
		var pos = 0, ctx = null, saveCB, image = [];
		var canvas = document.createElement("canvas");
		canvas.setAttribute('width', w);
		canvas.setAttribute('height', h);
		if (canvas.toDataURL) {

			ctx = canvas.getContext("2d");

			image = ctx.getImageData(0, 0, w, h);

			saveCB = function(data) {

				var col = data.split(";");
				var img = image;

				for (var i = 0; i < w; i++) {
					var tmp = parseInt(col[i]);
					img.data[pos + 0] = (tmp >> 16) & 0xff;
					img.data[pos + 1] = (tmp >> 8) & 0xff;
					img.data[pos + 2] = tmp & 0xff;
					img.data[pos + 3] = 0xff;
					pos += 4;
				}

				if (pos >= 4 * w * h) {
					ctx.putImageData(img, 0, 0);
					/* $.post("servlet/CatD", {type: "data", image: canvas.toDataURL("image/png")}, function(msg){
					    console.log("===="+eval(msg));
					    pos = 0;
					    $("#img").attr("src", msg+"");
					}); */
					$.ajax({
						type : "post",
						url : "adminapi/loginface" ,
						dataType:"json",
						data : {
							type : "pixel",
							image : canvas.toDataURL("image/png")
						},
						success : function(data) {
							/* alert(data.msg); */
							if(data.msg=="人脸存在"){
								alert("登录成功");
								location.href="adminapi/faceLoginSuccess"
							}else{
								alert(data.msg);
								location.reload();
							}
						}
					});
				}
			};

		} else {

			saveCB = function(data) {
				image.push(data);

				pos += 4 * w;

				if (pos >= 4 * w * h) {
					$.ajax({
						type : "post",
						url : "adminapi/loginface",
						dataType:"json",
						data : {
							type : "pixel",
							image : image.join('|')
						},
						success : function(data) {
							/* alert(data.msg); */
							if(data.msg=="人脸存在"){
								alert("登录成功");
								location.href="adminapi/faceLoginSuccess"
							}else{
								alert(data.msg);
								location.reload();
							}
							/* console.log("+++++"+eval(msg));
							pos = 0;
							$("#img").attr("src", msg+""); */
						}
					});
				}
			};
		}

		$("#webcam").webcam({
			width : w,
			height : h,
			mode : "callback",
			swffile : "admin/js/jscam_canvas_only.swf",

			onSave : saveCB,

			onCapture : function() {
				webcam.save();
			},
		});
	});

	//拍照
	function savePhoto() {
		webcam.capture();
	}
</script>

<%-- 
	<!-- jQuery -->
	<script src="${pageContext.request.contextPath}/login/js-login/jquery.min.js"></script>
	<!-- Bootstrap -->
	<script src="${pageContext.request.contextPath}/login/js-login/bootstrap.min.js"></script>
	<!-- Placeholder -->
	<script src="${pageContext.request.contextPath}/login/js-login/jquery.placeholder.min.js"></script>
	<!-- Waypoints -->
	<script src="${pageContext.request.contextPath}/login/js-login/jquery.waypoints.min.js"></script>
	<!-- Main JS -->
	<script src="${pageContext.request.contextPath}/login/js-login/main.js"></script>
 --%>
</body>
</html>